<template>
    <div class="banner w-full">
        <div class="title">中俄货代资源共享平台</div>
        <div class="operate">
            <el-input v-model="searchData.title" placeholder="找资源，可输入关键词搜索" size="large" class="search">
                <template #prepend>
                    <el-select v-model="searchData.type" placeholder="Select" style="width: 135px">
                        <el-option v-for="(item,index) in categoryList" :key="index" :label="item.categoryName" :value="item.categoryCode" />
                    </el-select>
                </template>
                <template #append>
                    <el-button class="bigBtn" type="primary" @click="to('/resource',searchData)">搜索</el-button>
                </template>
            </el-input>
            <el-button type="primary" class="bigBtn" @click="openPublishOrder">发布需求</el-button>
        </div>
    </div>
    <div class="fullW">
        <div class="flex-btw h-66px">
            <div class="use-title">最新需求</div>
            <el-button size="default" round @click="to('/demand')">查看全部</el-button>
        </div>

        <needList :pagination="false"></needList>
    </div>

    <!-- 发布需求 -->
    <PublishOrder ref="publishOrderRef" @updata="updata" />
</template>
<!--  -->
<script setup>
// 获取用户信息
import { storeToRefs } from "pinia";
const global = useStore.global()
const user = useStore.user()
const { categoryList } = storeToRefs(global)

const searchData = reactive({
    title: "",
    type: "OVERSEAS_WAREHOUSE",
});

// 发布需求
const publishOrderRef = ref();
const openPublishOrder = () => {
    if (!user.token) {
        ElMessageBox.confirm(`发布需求前请先登录，是否登录?`, "温馨提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            draggable: true,
            buttonSize: "default",
        }).then(async () => {
            user.login()
        })
    } else {
        publishOrderRef.value.show();
    }

};

const to = (path,query) => {
    navigateTo({path,query})
}
</script>
<style scoped lang="scss">
.banner {
    background: url("@/assets/images/bg.png") no-repeat center;
    height: 328px;
    padding-top: 110px;

    .title {
        font-size: 40px;
        color: var(--use-color-info);
        font-weight: 500;
        text-align: center;
    }

    .operate {
        width: 795px;
        margin: 40px auto 0;
        display: flex;
        justify-content: space-between;

        ::v-deep(.search) {
            width: 650px;
            height: 56px;
            line-height: 56px;
            border: 2px solid var(--use-color-primary);
            overflow: hidden;
            border-radius: 8px;

            .el-input__inner {
                font-size: 16px;
            }

            .el-input-group__prepend {
                background-color: #fff;
                box-shadow: none;
                border-right: 2px solid #f0f2f9;

                .el-select__wrapper {
                    height: 56px;
                    line-height: 56px;
                    font-size: 16px;
                }
            }

            .el-input__wrapper {
                box-shadow: none;
            }

            .bigBtn {
                font-size: 18px;
                width: 116px;
                height: 58px;
                border-radius: 8px;
                background-color: var(--use-color-primary);
                color: var(--use-color-info);
                font-weight: 500;
            }
        }
    }
}
</style>
